<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar title="我的" fixed placeholder />
    
    <!-- 用户信息卡片 - 简化版 -->
    <van-cell-group inset class="user-card">
      <van-cell center :border="false" class="user-cell">
        <template #title>
          <span class="username">{{ userInfo.name || '未登录用户' }}</span>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 退出登录按钮 -->
    <div class="logout-btn">
      <van-button 
        round 
        block 
        type="danger" 
        @click="showLogoutConfirm"
      >
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { showConfirmDialog, showToast } from 'vant';
import { useRouter } from 'vue-router';
import { useUserInfoStore } from '../stores/userInfo';

const router = useRouter();
const userInfoStore = useUserInfoStore()

// 用户信息 - 简化版
const userInfo = ref({
  name: ''
});

userInfo.value.name = userInfoStore.username

// 显示退出确认对话框
const showLogoutConfirm = () => {
  showConfirmDialog({
    title: '提示',
    message: '确定要退出登录吗？',
  })
    .then(() => {
      // 确认退出
      handleLogout();
    })
    .catch(() => {
      // 取消退出
      showToast('已取消');
    });
};

// 处理退出登录
const handleLogout = () => {
  // 这里应该调用退出登录的API
  // 模拟退出登录
  setTimeout(() => {
    showToast('退出成功');
    userInfoStore.initUserInfo()
    router.push({
        name: 'login'
    });
  }, 1000);
};
</script>

<style scoped>
.user-profile {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 20px;
}

.user-card {
  margin-top: 20px;
}

.user-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.username {
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.logout-btn {
  width: 90%;
  margin: 30px auto 0;
}
</style>